﻿CTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="OrcasThemes">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Home</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/animation.css">
    <!--[if IE 7]>

    <![endif]-->
    <link rel="stylesheet" href="css/font-awesome.css">
    <!--[if lt IE 8]>
      <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link href="css/lity.css" rel="stylesheet">
    <style>
[v-cloak] {
  display: none;
}
    </style>
  </head>
  <body>
    <div id="myapp">
      <!-- HOME 1 -->
      <div id="home1" class="container-fluid standard-bg">
        <!-- HEADER -->
        <div class="row header-top">
          <div class="col-lg-3 col-md-6 col-sm-5 col-xs-8">
            <a class="main-logo" href="#"><img src="img/main-logo.png" class="main-logo img-responsive" alt="Muvee Reviews" title="Muvee Reviews"></a>
          </div>
          <div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs">

          </div>
          <div class="col-lg-3 col-md-6 col-sm-7 hidden-xs">
            <div class="right-box">
              <button type="button" class="access-btn" data-toggle="modal" data-target="#enquirypopup">新增视频</button>
            </div>
          </div>
        </div>
        <!-- MENU -->
        <div class="row home-mega-menu ">
          <div class="col-md-12">
            <nav class="navbar navbar-default">
              <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
              </div>
              <div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
                <ul class="nav navbar-nav">
                  <li><a href="index.html">视频点播</a></li>
                </ul>
                <div class="search-block">
                  <form>
                    <input type="search" placeholder="Search">
                  </form>
                </div>
              </div>
              <!-- /.nav-collapse -->
            </nav>
          </div>
        </div>
        <!-- CORE -->
        <div class="row">
          <!-- SIDEBAR -->
          <div class="col-lg-2 col-md-4 hidden-sm hidden-xs">
          </div>
          <!-- HOME MAIN POSTS -->	
          <div class="col-lg-10 col-md-8">
            <section id="home-main">
              <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>视频列表</h2>
              <div class="row">
                <!-- ARTICLES -->
                <div class="col-lg-9 col-md-12 col-sm-12">
                  <div class="row auto-clear">
                    <article class="col-lg-3 col-md-6 col-sm-4" v-for="video in videos">
                      <!-- POST L size -->
                      <div class="post post-medium">
                        <div class="thumbr">
                          <a class="afterglow post-thumb" v-bind:href="'/video.html?id='+video.id" target="_blank">
                            <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round" aria-hidden="true"></i></span>
                            <div class="cactus-note ct-time font-size-1"><span></span></div>
                            <img class="img-responsive" v-bind:src="video.image" alt="#" v-cloak>
                          </a>
                        </div>
                        <div class="infor">
                          <h4>
                            <a class="title" href="#" v-cloak>{{video.name}}</a>
                          </h4>
                          <div class="ratings">
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                  <div class="clearfix spacer"></div>
                </div>
                <!-- RIGHT ASIDE -->
                <div class="col-lg-3 hidden-md col-sm-12 text-center top-sidebar">
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
      <!-- CHANNELS -->
      <div id="channels-block" class="container-fluid channels-bg">
      </div>
      <!-- BOTTOM BANNER -->
      <div id="bottom-banner" class="container text-center">	
      </div>
      <!-- FOOTER -->
      <div id="footer" class="container-fluid footer-background">
        <div class="container">
          <footer>
            <!-- SECTION FOOTER -->
            <div class="row">
              <!-- SOCIAL -->
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="row auto-clear">
                </div>
              </div>
              <!-- TAGS -->
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
              </div>
              <!-- POST -->
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
              </div>
              <!-- LINKS -->
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
              </div>
            </div>
            <div class="row copyright-bottom text-center">
              <div class="col-md-12 text-center">
                <a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template">
                  <img src="img/footer-logo.png" class="img-responsive text-center" alt="Video Magazine Bootstrap HTML5 template">
                </a>	
                <p v-cloak>Copyright &copy; Author by {{author}}</p>
              </div>
            </div>
          </footer>
        </div>
      </div>
      <!-- MODAL -->
      <div id="enquirypopup" class="modal fade in " role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content row">
            <div class="modal-header custom-modal-header">
              <button type="button" class="close" data-dismiss="modal">×</button>
              <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>新增视频</h2>
            </div>
            <div class="modal-body">
              <form name="info_form" class="form-inline" action="/video" method="post" enctype="multipart/form-data">
                <div class="form-group col-sm-12">
                  <input type="text" class="form-control" name="name" placeholder="输入视频名称">
                </div>
                <div class="form-group col-sm-12">
                  <input type="text" class="form-control" name="info" placeholder="输入视频简介">
                </div>
                <div class="form-group col-sm-12">
                  <input type="file" class="form-control" name="video" placeholder="选择视频文件">
                </div>
                <div class="form-group col-sm-12">
                  <input type="file" class="form-control" name="image" placeholder="选择封面图片">
                </div>
                <div class="form-group col-sm-12">
                  <button class="subscribe-btn pull-right" type="submit" title="Subscribe">上传</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <!-- JAVA SCRIPT -->
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="js/jquery-1.12.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/lity.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    $(".nav .dropdown").hover(function() {
      $(this).find(".dropdown-toggle").dropdown("toggle");
    });
  </script>
  <script>
    let app = new Vue({
      el: '#myapp',
      data: {
        author: "Zhangwenchao",
        videos:[]
      },
      methods : {
        get_allvideos : function() {
          $.ajax({
            url: "/video",
            type: "get",
            context: this,
            success : function(result, status, xhr){
              this.videos = result;
            }
          })
        }
      }
    });
app.get_allvideos();
  </script>
</html>

